<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/jquery-1.10.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            line-height: 60px;
        }

        li {
            list-style: none;
            line-height: 40px;
            border: 1px dashed #333;
        }

        .list {
            overflow: hidden;
        }

        .active {
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <div>
        <button>新增1</button>
        <button>新增2</button>
        <button>新增3</button>
    </div>
    <div class="wrap">
        <h3 id="title">批量操作元素</h3>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last"><span class="demo">06</span></li>
        </ul>
    </div>
</body>
<script>
    // jquery中如何创建元素?
    // 1. 通过原生创建元素节点   => 再转化为jquery对象 
    // 2. $(html) 接收一个html结构  => 返回对应元素形成的jquery对象
    // 3. $(html,option) 除了接收一个html结构,还可以接收一个对象参数 作为该元素的修饰  => 返回对应元素形成的jquery对象


    // 如何将创建的元素 放到父元素中


    // 父元素统筹
    // 追加   放到父元素所有内容的最后方
    // 预追加   放到父元素所有内容的最前方
    // $(parent).append(ele)     向父元素中追加一个元素(新的|已经存在的)
    // $(parent).prepend(ele)    向父元素中预追加一个元素(新的|已经存在的)

    // 子元素 (预)追加 到 父元素
    // $(ele).appendTo(parent);   将一个元素(新的|已经存在的) 追加到 另一个元素(父元素)
    // $(ele).prependTo(parent);   将一个元素(新的|已经存在的) 预追加到 另一个元素(父元素)

    $("button").eq(0).click(function () {

        // var li = document.createElement("li");
        // var $li = $(li).html("我是新增的li").addClass("newLi");
        // $(".list").append($li);
        // $(".list").prepend($li);

        var li = document.createElement("li");
        // $(li).html("我是新增的li").addClass("newLi").appendTo(".list");
        $(li).html("我是新增的li").addClass("newLi").prependTo(".list");

    })

    $("button").eq(1).click(function () {
        // $("<li>我是新增的li</li>").addClass("a2").click(function(){
        //     console.log($(this).index());
        // }).css({background:"red"}).appendTo(".list");

        // $("<li></li>").html("我是新增的li").addClass("a2").click(function(){
        //     console.log($(this).index());
        // }).css({background:"red"}).appendTo(".list");

        $("<li>").html("我是新增的li").addClass("a2").click(function () {
            console.log($(this).index());
        }).css({background: "red"}).appendTo(".list");
    })
    $("button").eq(2).click(function () {

        $("<li>", {
            text: "我是新增的li",  // innerText
            class: "a3",           // className
            click: function () {
                console.log($(this).index());
            },
            css: {
                background: "red",
                width: 200,
                height: 100,
            }
        }).appendTo(".list");
    })







</script>

</html>